<!--
 * @Author: your name
 * @Date: 2021-08-25 14:39:52
 * @LastEditTime: 2021-09-14 17:58:01
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \bigdate\src\views\others\changeOther.vue
-->
<template>
    <Row :gutter="[10, 10]">
        <Col :md="{ span: 24 }" :xs="{ span: 24 }" :lg="{ span: 24 }">
            <Card :loading="isload" :class="['move-y1', isMove ? 'active' : '']">
                <template #title>
                    <div class="title">关于项目</div>
                </template>
                <Descriptions bordered>
                    <DescriptionsItem label="Name">{{ jsons.name }}</DescriptionsItem>
                    <DescriptionsItem
                        label="Version"
                    >
                        <Tag color="cyan">{{ jsons.version }}</Tag>
                    </DescriptionsItem>
                    <DescriptionsItem
                        label="Pull Time"
                    >
                        <Tag color="cyan">2021/11/2</Tag>
                    </DescriptionsItem>
                    <DescriptionsItem
                        label="Gitee"
                        :span="2"
                    >
                        <a
                            href="#"
                        >https://gitee.com/shaohqfspace/vite-ts-admin</a>
                    </DescriptionsItem>
                </Descriptions>
            </Card>
        </Col>
        <Col :md="{ span: 24 }" :xs="{ span: 24 }" :lg="{ span: 24 }">
            <Card :loading="isload" :class="['move-y2', isMove ? 'active' : '']">
                <template #title>
                    <div class="title">开发环境依赖</div>
                </template>
                <Descriptions bordered>
                    <DescriptionsItem
                        v-for="(item, index) in dependencies"
                        :key="index"
                        :label="item.name"
                    >
                        {{ item.value }}
                    </DescriptionsItem>
                </Descriptions>
            </Card>
        </Col>
    </Row>
</template>
<script setup lang="ts">
//  读取package.json中的数据必须是异步读取
import { onMounted, ref, unref } from 'vue'
import { jsonToObj, Iterator } from '@/ntils/helper'
import {
    Card,
    Row,
    Col,
    Descriptions,
    DescriptionsItem,
    Tag,
} from 'ant-design-vue'

interface AllType {
  name: String;
  dependencies: any;
}
let jsons = ref<AllType>()
let isload = ref<Boolean>(true)
let isMove = ref<Boolean>(false)
// 开发环境
let dependencies = ref<Array<Iterator>>()
// 生产环境 -- 未调取
onMounted(() => {
    isMove.value = true
    async function getjson() {
        let json = (await import('../../../package.json')).default
        jsons.value = json
        // 格式化数据
        setTimeout(() => {
            jsonToObj(unref(jsons.value.dependencies))
            .then((res) => {
                dependencies.value = res
            })
            .catch((err) => {
                dependencies.value = err
            })
            isload.value = false
        }, 1000)
    }
    getjson()
})
</script>
<style lang="less" scoped>
.title {
  font-size: 12px;
}
@counter: 8;
.loop(@n) when (@n > 0) {
  &:nth-child(@{n}) {
    transition-delay: 0.1s * @n;
  }
  // 递归
  .loop((@n - 1));
}
.move-y1 {
  transition: all 0.3s ease;
  transform: translateY(100px);
  &.active {
    transform: translateY(0);
  }
  transition-delay: 0.1s;
}
.move-y2 {
  transition: all 0.3s ease;
  transform: translateY(100px);
  &.active {
    transform: translateY(0);
  }
  transition-delay: 0.2s;
}
</style>
